<template>
	<view style="background-color: #D3D3D3;">
		<view class="wxtip" id="JweixinTip" v-if="isShare" @click="noShare()">
		    <image src="../../static/center/weixin-tip.png" style="width:60px;height:60px;position:fixed;top:5px;right:20px;" />
		    <view class="wxtip-txt">点击右上角<br/>选择分享好友</view>
		</view>
		<view class="wrap">
			<u-swiper :list="lunboImg" height=400></u-swiper>
		</view>
		<view class="info-box">
			<view class="goods-name">
				<view class="gname-box">
					<view class="gname">{{goodsInfo.gname}}</view>
					<view class="jianjie">{{goodsInfo.jianjie}}</view>
				</view>
				<view class="share-box" @click="share(goodsInfo.gpinpai)">
					<image src="../../static/index/sharingGoods.png" mode="" class="share-img"></image>
					<text class="jianjie">分享有奖</text>
				</view>
			</view>
			<view class="jiage">
				<view>￥<text>{{gprice}}</text>/<text>{{goodsInfo.gdanwei}}</text> </view>
				<view v-if="goodsInfo.qitianwuliyou==1">支持七天无理由退款</view>
			</view>
			<view class="kuaidi-box">
				<view>快递：<text>{{goodsInfo.yunfei}}</text></view>
				<view>累计销量：<text>{{goodsInfo.gsellnum}}</text></view>
				<view>携联品牌共享</view>
			</view>
			<view class="tab-box">
				<view :class="activeIndex==0?'active':''" @click="activeIndex=0">图文详情</view>
				<view :class="activeIndex==1?'active':''" @click="activeIndex=1">产品参数</view>
			</view>
			<view class="tuwen-box" v-show="activeIndex==0">
				<!-- <rich-text :nodes="goodsInfo.gdetail"></rich-text> -->
				<mp-html :content="goodsInfo.gdetail" />
			</view>
			<view class="canshu" v-show="activeIndex==1">
				<view class="canshu-item">
					<view>产地</view>
					<view>{{goodsInfo.gchandi}}</view>
				</view>
				<view class="canshu-item">
					<view>品牌</view>
					<view>{{goodsInfo.pingpai==null?"":goodsInfo.pingpai.name}}</view>
				</view>
			</view>
		</view>
		<!-- 灰色图层 -->
		<view class="addcart-index" v-show="showAddCartBox || showGoumaiBox"></view>
		<!-- 加入购物车 -->
		<view class="addcart-box" v-show="showAddCartBox || showGoumaiBox">
			<view class="close" @click="closeBox()"><u-icon name="close-circle" color="#ccc" size="40"></u-icon></view>
			<view class="goods-info">
				<view class="">
					<image :src="switchImg(gimages)" class="goods-img" mode="widthFix"></image>
				</view>
				<view>
					<view style="font-size: 15px;">{{goodsInfo.gname}}</view>
					<view class="qian"><text>{{goodsInfo.isVIP==1 ? (gprice*1-goodsInfo.zhitui_price*1).toFixed(2) : gprice}}</text>/<text>{{goodsInfo.gdanwei}}</text></view>
				</view>
			</view>
			<view class="num-box">
				<view class="tips">购买数量</view>
				<view class="btn-group">
					<view class="jian" @click="numJian()">-</view>
					<view class="num">{{num}}</view>
					<view class="jia" @click="numJia()">+</view>
				</view>
			</view>
			<view class="guigebox">
				<view class="guigegroup" v-for="(item,i) in resetGuige.select_guiges" :key="i">
					<view class="guigeName">{{item.name}}</view>
					<view class="guigeValue-box" >
						<view v-for="(im,j) in item.values">
							<view class="guigeValue" @click="setActive(i,j)" :class="selectGuige[i][j]==1?'active':''">
								<image v-if="swichGuigeIcon(i,j)!='../../static/center/chongzhi.png'" :src="swichGuigeIcon(i,j)" class="guigeImg" mode="widthFix"></image>
								{{im.value}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="confirm-box">
				<button type="default" class="confirm-btn" @click="queDing()">确定</button>
			</view>
		</view>
		<view class="btm-fix">
			<uni-goods-nav :fill="false"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	//默认是大小写敏感
	String.prototype.replaceAll=function(str,replace,ingore){
	    ingore = ingore || false;
	    var reg;
	    if(!ingore){
	        reg = new RegExp(str,"g");
	    }else{
	        reg = new RegExp(str,"gi");
	    }
	    return this.replace(reg,replace);
	}
	
	import mpHtml from '@/components/mp-html/mp-html'
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				rawList:[],
				goodsInfo:{},	// 商品信息
				guige:{	},		// 商品规格，字符串形式
				resetGuige:{ },	// 重置规格，json格式
				selectGuige:[ ],// 用于选择的规格，未选中设置为-1,
				gprice:"",		// 商品价格
				names:"",		// 选择的规格值
				params:"",		// 选择的规格值下标
				num:1,			// 选择的商品数量
				options: [{
						icon: 'headphones',
						text: '客服'
					}, {
						icon: 'shop',
						text: '公司',
						infoBackgroundColor:'#007aff',
						infoColor:"red"
					}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}],
				activeIndex:0,			// 选项卡下标
				showAddCartBox:false,	// 是否显示加入购物车
				showGoumaiBox:false,	// 是否点击立即购买,
				gimages:'',				// 选中的规格图片
				logined:false,			// 判断用户是否登录
				isShare:false,			// 是否点击分享了
				uid:'',					// 推荐人ID
				gid:'',					// 商品ID
				kucun:10				// 商品库存
			}
		},
		//分享给好友
		onShareAppMessage() {
			return {
				title: '携联健康商品：'+this.goodsInfo.gname,
				imageUrl:this.switchImg(this.gimages),
				path: 'pages_pinpai/goods/goodsDetail?gid='+this.gid+'&uid='+uni.getStorageSync('usersId')+'&isShare=true',
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: '携联健康商品：'+this.goodsInfo.gname,
				imageUrl:this.switchImg(this.gimages),
				path: 'pages_pinpai/goods/goodsDetail?gid='+this.gid+'&uid='+uni.getStorageSync('usersId')+'&isShare=true'
			}
		},
		methods: {
			//分享
			share(ppid){
				// console.log("点击分享的品牌："+ppid)
				this.isShare = true
			},
			//不分享
			noShare(){
				this.isShare = false
			},
			// 设置规格点击事件
			setActive(i,j){
				// this.selectGuige[i][j]=1;
				for(let m=0;m<this.selectGuige[i].length;m++)
					this.selectGuige[i][m]=-1;			// 把同一组的设置为-1
				this.$set(this.selectGuige[i],[j],1)	// 设置选中，出现红色边框,只有一个规格时有效
				if(this.resetGuige.select_guiges.length==1)		// 如果只有一组规格
				{
					this.gprice = this.resetGuige.values[j].jiage;
					this.gimages = this.resetGuige.values[j].img;
					this.kucun = this.resetGuige.values[j].kucun;
					this.params =`"${j}"`;
					this.names = `{"${this.resetGuige.select_guiges[i].name}":"${this.resetGuige.select_guiges[i].values[j].value}"}`;
				}	
				else if(this.resetGuige.select_guiges.length==2)		// 如果有两组规格
				{
					let pa=[];
					for(let m=0;m<this.selectGuige.length;m++){
						for(let n=0;n<this.selectGuige[m].length;n++){
							if(this.selectGuige[m][n]==1){
								pa.push(n);
								break;
							}
						}
					}
					if(pa.length==2){
						this.gprice = this.resetGuige.values[pa[0]].children[pa[1]].jiage;
						this.gimages = this.resetGuige.values[pa[0]].img;
						this.kucun = this.resetGuige.values[pa[0]].children[pa[1]].kucun;
					}
					this.params = pa;	// 获取规格值的下标
					let gui = [];
					for(let m=0;m<pa.length;m++){
						let obj = `{"${this.resetGuige.select_guiges[m].name}":"${this.resetGuige.select_guiges[m].values[pa[m]].value}"}`;
						gui.push(obj);
					}
					this.names = gui.toString();
				}else if(this.resetGuige.select_guiges.length==3){
					console.log("lalala")
				}
			},
			// 关闭规格box
			closeBox(){
				if(this.showAddCartBox)
					this.showAddCartBox=!this.showAddCartBox;
				else
					this.showGoumaiBox = !this.showGoumaiBox;
			},
			// 在规格box中点击了确定
			queDing(){
				if(this.checkGuige()){
					if(this.showAddCartBox)	{// 点了加入购物车
						// console.log("确定加入购物车")
						// console.log("规格："+this.names+" 规格下标："+this.params)
						this.names = this.names.replace(/(\")/g,"");
						this.params = encodeURI(this.params).replace(/(\")/g,"");
						// console.log("处理后规格："+this.names+" 规格下标："+this.params)
						if(this.goodsInfo.gstatus==1){
							let userid = uni.getStorageSync("usersId");
							this.$http.get('/ppgxShopCat/addShopCat', {
								userid:userid,
								gid:this.goodsInfo.gid,
								catnum:this.num,
								money:this.goodsInfo.isVIP==1 ? this.gprice-this.goodsInfo.zhitui_price : this.gprice,
								names:this.names,
								params:this.params,
							}).then(res => {
								if(res.data.code==0){
									this.$u.toast("成功加入购物车");
									this.showAddCartBox = !this.showAddCartBox;
									uni.$emit("getPinpaiCat");
								}else{
									this.$u.toast(res.data.msg);
								}
							})
						}else{
							this.$u.toast("该商品已下架！")
						}
					}else if(this.showGoumaiBox){	// 点了立即购买
						// console.log("确定立即购买")
						if(this.kucun <= 0){
							this.$u.toast("库存不足！")
						}else{
							this.showGoumaiBox= !this.showGoumaiBox;
							let reg = /{/g;
							let reg2 = /}/g;
							let names = this.names.replace(reg,'').replace(reg2,'');
							names = this.names ;
							uni.navigateTo({
								url:'../order/ljgm-order?gprice='+(this.gprice-this.goodsInfo.zhitui_price).toFixed(2)+'&gname='+this.goodsInfo.gname+'&gimages='+this.goodsInfo.gimages+'&gid='+this.goodsInfo.gid+'&gdanwei='+this.goodsInfo.gdanwei+'&sid='+this.goodsInfo.gsId+'&names='+this.names+'&params='+this.params+'&uid='+this.uid+'&num='+this.num+'&yunfei='+this.goodsInfo.yunfei
							})
						}
					}
				}else{
					this.$u.toast("请选择完整规格");
				}
			},
			// 检查是否选中了全部规格
			checkGuige(){
				// 如果没规格
				if(this.resetGuige.select_guiges==undefined || this.resetGuige.select_guiges==null)
					return true;
				
				let n = this.resetGuige.select_guiges.length;	// 获取全部规格个数
				let k = 0;	// 表示选择规格个数
				for(let i=0;i<this.selectGuige.length;i++){
					for(let j=0;j<this.selectGuige[i].length;j++){
						if(this.selectGuige[i][j]==1){
							k++;
							break;
						}
					}
				}
				if(k!=n){
					return false;
				}else{
					return true;
				}
			},
			// 点击加购或下单
			buttonClick (e) {
				this.logined = uni.getStorageSync('logined');
				if(!this.logined){
					this.$u.toast("请先登录")
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}else{
					if(e.index==0){// 加入购物车
						// console.log("点击加入购物车了")
						this.showAddCartBox=!this.showAddCartBox
					}else if(e.index==1){	// 立即购买
						// console.log("点击立即购买了")
						if(this.guige!=null && this.guige.length>1){	// 如果有规格
							this.showGoumaiBox=!this.showGoumaiBox;
						}else{
							uni.navigateTo({
								url:'../order/ljgm-order?gprice='+this.gprice+'&gname='+this.goodsInfo.gname+'&gimages='+this.goodsInfo.gimages+'&gid='+this.goodsInfo.gid+'&gdanwei='+this.goodsInfo.gdanwei+'&sid='+this.goodsInfo.gsId+'&names='+encodeURI(JSON.stringify(this.names))+'&params='+encodeURI(JSON.stringify(this.params))+'&uid='+this.uid+'&num='+this.num+'&yunfei='+this.goodsInfo.yunfei
							})
						}
					}
				}
			},
			onClick (e) {
				if(e.content.text == "客服"){
					uni.navigateTo({
						url:'kefu?ppId='+this.goodsInfo.gpinpai
					})
				}
				if(e.content.text == "公司"){
					uni.navigateTo({
						url:'../pinpai/pinpaiDetail?ppid='+this.goodsInfo.gpinpai
					})
				}
			},

			// 转换图片地址
			switchImg(gimages){
				return this.host+gimages;
			},
			swichGuigeIcon(i,j){
				if(i==0){
					return this.host + this.resetGuige.values[j].img
				}else{
					return "../../static/center/chongzhi.png"
				}
			},
			numJia(){
				// this.$u.toast("全返商品一次只能购买一件")	;
				this.num++
			},
			numJian(){
				if(this.num<=1){
					this.$u.toast("受不了了，再减就没有了哦！");
				}else{
					this.num--
				}
			}
		},
		onLoad(opt) {
			this.gid = opt.gid;
			if(opt.isShare){
				this.uid = opt.uid;
			}
			this.showAddCartBox = opt.showAddCartBox;
			this.$http.get('/ppgoods/getGoodsInfoByIdxcx', {
				gid:opt.gid,
				userid:uni.getStorageSync('usersId')==""?'-1':uni.getStorageSync('usersId')
			}).then(res => {
				console.log("商品信息")
				console.log(res.data)
				this.rawList = res.data.data[0].goodsImageList;
				this.goodsInfo = res.data.data[0];
				this.gimages = this.goodsInfo.gimages;
				this.guige = res.data.data[0].guige;
				// 规格box中显示的价格
				this.gprice = this.goodsInfo.gprice;
				if(this.guige!=null && this.guige.length>1){
					this.resetGuige = JSON.parse(this.guige);
					// 默认情况下没有选规格
					for(let i=0;i<this.resetGuige.select_guiges.length;i++){
						let t = [	];
						for(let j=0;j<this.resetGuige.select_guiges[i].values.length;j++){
							t.push(-1);
						}
						this.selectGuige.push(t);
					}
				}
				// var reg = /\"\/image/g;
				// this.goodsInfo.gdetail = this.goodsInfo.gdetail.replace(reg,'"'+this.host+'/image');
				if(this.goodsInfo.gdetail != null && this.goodsInfo.gdetail != ""){
					this.goodsInfo.gdetail = this.goodsInfo.gdetail.toString().replaceAll("/image", this.host+"/image");
				}
			})
		},
		computed:{
			lunboImg(){
				let tu=[	];
				for(let i=0;i<this.rawList.length;i++){
					let obj = {	};
					obj.image=this.host+this.rawList[i].gimages;
					tu.push(obj);
				}
				return tu;
			},
		},
		components: {uniGoodsNav,mpHtml}
	}
</script>

<style lang="scss" scoped>
	.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998;}
	.wxtip-txt{margin-top: 107px; color: #fff; font-size: 20px; line-height: 1.5;}
	.jiage{
		color: #FF7900;
		display: flex;
		justify-content: space-between;
	}
	/* 加入购物车 */
	.addcart-box{
		border-top: 1px solid #CCCCCC;
		position: fixed;
		bottom: 0rpx;
		height: 800rpx;
		border-radius: 20rpx;
		left: 0rpx;
		width: 100%;
		background-color: #Fefefe;
		z-index: 200;
		padding: 20rpx;
	}
	.addcart-index{
		position: absolute;
		height: 2000rpx;
		width: 100%;
		left: 0rpx;
		bottom: 0rpx;
		z-index: 100;
		background:#dddddd; opacity:.7; filter:alpha(opacity=70);
		padding: 20rpx;
	}
	.addcart-box .confirm-box{
		position: absolute;
		width: 100%;
		bottom: 0rpx;
		left: 0rpx;
	}
	.addcart-box .close{
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}
	.addcart-box .goods-info{
		display: flex;
		justify-content: flex-start;
		padding: 10rpx 20rpx;
		margin-bottom: 20rpx;
		height: 200rpx;
	}
	.addcart-box .goods-info>view{
		margin-right: 20rpx;
		line-height: 50rpx;
	}
	.addcart-box .goods-img{
		width: 200rpx;
		max-height: 200rpx;
	}
	.btm-fix{
		width: 100%;
		position: fixed;
		bottom: 0rpx;
	}
	.info-box{
		background-color: white;
		padding: 20rpx;
		padding-top: 50rpx;
	}
	.goods-name{
		display: flex;
	}
	.goods-name .gname{
		font-size: 30rpx;
	}
	.goods-name .jianjie{
		color: #ccc;
		font-size: 24rpx;
		margin: 10rpx 0rpx;
	}
	.goods-name .share-img{
		width: 50rpx;
		height: 50rpx;
	}
	.gname-box{
		flex: 3;
	}
	.share-box{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.kuaidi-box{
		display: flex;
		padding: 10rpx;
		color: slategrey;
		border-bottom: 1px solid #F1f1f1;
		justify-content: space-between;
	}
	.tab-box{
		display: flex;
		padding: 20rpx 0 20rpx 0;
		// border-bottom: 1rpx #C0C4CC solid;
	}
	.tab-box>view{
		flex: 1;
		text-align: center;
	}
	.tab-box .active{
		color: red;
	}
	.canshu-item{
		display: flex;
		padding: 20rpx;
		border-top: 1rpx #D6D5D5 solid;
	}
	.canshu-item>view:nth-child(1){
		flex: 1;
	}
	.canshu-item>view:nth-child(2){
		flex: 4;
	}
	.tuwen-box{
		padding-bottom: 50px;
		border-top: 1rpx #D6D5D5 solid;
	}
	.num-box{
		display: flex;
		justify-content: space-between;
	}
	.btn-group .num{
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	.btn-group{
		display: flex;
		border: 1px solid #ccc;
		justify-content: space-around;
	}
	.btn-group .jian,.btn-group .num,.btn-group .jia{
		padding: 10rpx 20rpx;
		flex: 1;
		text-align: center;
	}
	.btn-group .jian,.btn-group .jia{
		background-color: #F1F1F1;
	}
	.qian::before{
		content: '￥';
		color: #F29100;
	}
	.qian{
		font-size: 15px;
		color: #F29100;
	}
	.tips{
		color: #ccc;
	}
	.confirm-btn{
		background-color: #FF4400;
		color: white;
	}
	/* 规格 */
	.guigeValue-box{
		display: flex;
		margin-top: 10rpx;
	}
	.guigegroup{
		margin-top: 10rpx;
	}
	.guigebox .guigeImg{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}
	.guigeValue-box .guigeValue{
		padding: 10rpx;
		margin-right: 20rpx;
		background-color: #e8e8e8;
		border-radius: 10rpx;
		line-height: 40rpx;
		font-size: 18rpx;
	}
	.guigeValue-box .active{
		border: 1rpx solid red;
	}
</style>
